<script setup>
import {ref, computed, onMounted, watch} from "vue"

const props = defineProps({
    cssStyle: {
        type: Object,
    }
})

const emit = defineEmits(["use"])

const styleConfig = ref()
const useCode = () => {
    try {
        const styleObj = JSON.parse(styleConfig.value)
        emit("use", styleObj)
    } catch (e) {
        $message.warning("代码错误！")
    }
}
const setStyleCode = () => {
    styleConfig.value = JSON.stringify(props.cssStyle, null, 4)
}

const styleString = computed(() => props.cssStyle)
watch(() => styleString.value, (newVal, oldVal) => {
    setStyleCode()
})
onMounted(() => {
    setStyleCode()
})
</script>

<template>
    <el-collapse style="width: 100%">
        <el-collapse-item name="1">
            <template #title>
                <div class="title">
                    <b-icon name="bi-filetype-css" />
                    CSS 代码 <span style="color: orange;">（使用json 格式）</span>
                </div>
            </template>
            <el-input v-model="styleConfig" :rows="20" type="textarea" />
            <el-button plain style="margin-top: 10px" type="primary" @click="useCode">使用代码</el-button>
        </el-collapse-item>
    </el-collapse>
</template>

<style lang="scss" scoped>

</style>